<template>
  <view class="upload-content">
    <block
      v-for="(item, index) in imageList"
      :key="index"
    >
      <view class="upload-item">
        <image
          class="upload-img"
          :src="item.filePath"
          mode="aspectFill"
          @click="previewImage(index)"
        />
        <image
          class="upload-del-btn" 
          src="" 
          mode="scaleToFill" 
          @click="delImage(index)"
        />
        <view
          v-if="item.progress < 100"
          class="upload-progress"
        >
          {{ item.progress }}%
        </view>
      </view>
    </block>
    <view
      v-if="rduLength > 0"
      class="upload-add-btn"
      @click="chooseImage"
    />
  </view>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      value: '' // 上传接口地址
    },
    count: {
      type: Number,
      value: 4 // 单次可选择的图片数量
    },
    length: {
      type: Number,
      value: 50 // 可上传总数量
    }
  },
  data() {
    return {
      imageList: []
    }
  },
  computed: {
    rduLength(){
      return this.length - this.imageList.length
    }
  },
  methods: {
    // 选择图片
    chooseImage: function(){
      uni.chooseImage({
        count: this.rduLength < this.count ? this.rduLength : this.count, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album'], // album 从相册选图，camera 使用相机，默认二者都有
        success: (res) => {
          const images = res.tempFilePaths
          this.uploadFiles(images)
        }
      })
    },
    // 上传图片
    async uploadFiles(images){
      this.imageList.push({
        filePath: images[0],
        progress: 0
      })
      uni.showLoading({
        title: '请稍后..',
        mask: true,
      })
      try{
        const uploadUrl = await this.uploadImage(images[0])
        if(uploadUrl !== false){
          images.splice(0, 1)
          this.imageList[this.imageList.length - 1].src = uploadUrl

          // 判断是否需要继续上传
          if(images.length > 0 && this.rduLength > 0){
            this.uploadFiles(images)
          }else{
            uni.hideLoading()
          }
        } else {
          // 上传失败处理
          this.imageList.pop()
          uni.hideLoading()
          uni.showToast({
            title: '上传中出现问题，已终止上传',
            icon: 'none',
            mask: true,
            duration: 2000
          })
        }
      } catch(err) {
        console.log(err)
      }
    },
    uploadImage: function(file){
      return new Promise((resolve, reject) => {
        // 发送给后端的附加参数
        const formData = {
          thumb_mode: 1,  
        }
        this.uploadTask = uni.uploadFile({
          url: this.url, 
          filePath: file,
          name: 'file',
          formData: formData,
          success(uploadFileResult){
            const uploadFileRes = JSON.parse(uploadFileResult.data) || {}
            if(uploadFileRes.status === 1 && uploadFileRes.data){
              resolve(uploadFileRes.data)
            }else{
              reject('接口返回错误')
            }
          }, 
          fail(){
            reject('网络链接错误')
          }
        })
        // 上传进度
        this.uploadTask.onProgressUpdate((progressRes) => {
          this.imageList[this.imageList.length - 1].progress = progressRes.progress
        })
      })
    },
    // 删除图片
    delImage: function(index){
      uni.showModal({
        content: '确定要放弃这张图片么？',
        success: (confirmRes) => {
          if (confirmRes.confirm) {
            this.imageList.splice(index, 1)
          } 
        }
      })
    },
    // 预览图片
    previewImage: function(index){
      const urls = []
      this.imageList.forEach((item) => {
        urls.push(item.filePath)
      })
      uni.previewImage({
        current: urls[index],
        urls: urls,
        indicator: 'number'
      })
    }
  }
}
</script>

<style lang="scss">
	.upload-content{
		padding:24rpx 0 0 28rpx;
		background-color: #fff;
		overflow:hidden;
	}
	.upload-item{
		position: relative;
		float:left;
		width:150rpx;
		height:150rpx;
		margin-right:30rpx;
		margin-bottom:30rpx;
		&:nth-child(4n){
			margin-right:0;
		}
		.upload-img{
			width:100%;
			height:100%;
			border-radius:8rpx;
		}
		.upload-del-btn{
			position: absolute;
			right:-16rpx;
			top:-14rpx;
			width:36rpx;
			height:36rpx;
			border: 4rpx solid #fff;
			border-radius: 100px;
		}
		.upload-progress{
			position: absolute;
			left:0;
			top:0;
			display:flex;
			align-items:center;
			justify-content: center;
			width:100%;
			height:100%;
			background-color: rgba(0,0,0,.4);
			color:#fff;
			font-size:24rpx;
			border-radius:8rpx;
		}
	}
	.upload-add-btn {
		position: relative;
		float:left;
		width: 150rpx;
		height: 150rpx;
		z-index: 99;
		border-radius:8rpx;
		background:#f9f9f9;
		&:before,
		&:after {
			content: " ";
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			width: 4rpx;
			height: 60rpx;
			background-color: #d6d6d6;
		}
		&:after {
			width: 60rpx;
			height: 4rpx;
		}
		&:active {
			background-color: #f7f7f7;
		}
	}

</style>
